<!DOCTYPE html>
<html lang="en" style="height: 100%;">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flying Carpet</title>
    <script type="module" src="/main.js" defer></script>
    <!-- <script type="module" src="/deps/bootstrap.bundle.min.js" defer></script> -->
    <link rel="stylesheet" href="/deps/bootstrap.min.css">
    <link rel="stylesheet" href="style.css" />
  </head>

  <body style="height: 100%;">
    <div class="verticalContainer" id="mainContainer" style="height: 100%;">

      <!-- top bar -->
      <div class="horizontalContainer" style="flex-grow: 0; margin: 10px;">
        <div>
          <h1 style="font-size: 40px; margin-bottom: 0px; padding-bottom: 0px;"><b>Flying Carpet</b></h1>
          <small style="margin-top: 0px; padding-top: 0px;">Version 9</small>
          <small style="margin-top: 0px; padding-top: 0px; color: blue; float: right; cursor: pointer;" id="aboutButton">
            About
          </small>
        </div>
        <div id="qrcode" style="width: 150px; height: 150px;">
          <img src="assets/icon1024.png" style="width: 150px; height: 150px;">
        </div>
      </div>
      <div class="form-check form-switch" style="margin: 10px;">
        <input class="form-check-input"  style="width: 40px; height: 20px; margin-right: 5px;" type="checkbox" role="switch" id="bluetoothSwitch" onchange="bluetoothChange()">
        <label class="form-check-label" for="bluetoothSwitch">Use Bluetooth</label>
      </div>

      <!-- mode box -->
      <label style="margin-left: 10px">Select Mode</label>
      <div class="btn-group" role="group" aria-label="Mode selector" id="modeBox" style="margin: 10px; margin-top: 0px;">
        <input type="radio" class="btn-check" name="moderadio" id="sendButton" autocomplete="off" onchange="modeChange('send')">
        <label class="btn btn-outline-primary" for="sendButton">Send</label>

        <input type="radio" class="btn-check" name="moderadio" id="receiveButton" autocomplete="off" onchange="modeChange('receive')">
        <label class="btn btn-outline-primary" for="receiveButton">Receive</label>
      </div>

      <!-- peer box -->
      <label id="peerLabel" style="margin-left: 10px">Select Peer OS</label>
      <div class="btn-group" role="group" aria-label="Peer selector" id="peerBox" style="margin: 10px; margin-top: 0px;">
        <input type="radio" class="btn-check" name="peerradio" id="androidButton" autocomplete="off" onchange="peerChange('android')">
        <label class="btn btn-outline-primary" for="androidButton">Android</label>

        <input type="radio" class="btn-check" name="peerradio" id="iosButton" autocomplete="off" onchange="peerChange('ios')">
        <label class="btn btn-outline-primary" for="iosButton">iOS</label>

        <input type="radio" class="btn-check" name="peerradio" id="linuxButton" autocomplete="off" onchange="peerChange('linux')">
        <label class="btn btn-outline-primary" for="linuxButton">Linux</label>

        <input type="radio" class="btn-check" name="peerradio" id="macButton" autocomplete="off" onchange="peerChange('mac')">
        <label class="btn btn-outline-primary" for="macButton">macOS</label>

        <input type="radio" class="btn-check" name="peerradio" id="windowsButton" autocomplete="off" onchange="peerChange('windows')">
        <label class="btn btn-outline-primary" for="windowsButton">Windows</label>
      </div>

      <!-- password box -->
      <input type="password" placeholder="Password (start transfer on other end):" id="passwordBox" style="display: none; padding: 5px; margin: 10px;" autocapitalize="off" autocorrect="off" spellcheck="false">

      <!-- start/cancel buttons -->
      <button type="button" id="startButton" class="btn btn-success" onclick="startTransfer(false)" style="margin: 10px; min-height: 25px;" disabled>Select Files</button>
      <button type="button" id="cancelButton" class="btn btn-danger" onclick="cancelTransfer()" style="display: none; margin: 10px; min-height: 25px;">Cancel Transfer</button>

      <!-- output box -->
      <div id="outputBox" class="horizontalContainer" style="flex-grow: 9; flex-shrink: 9; overflow-y: auto; padding: 5px; margin-top: 5px;">
        Welcome to Flying Carpet!<br>Once other options are selected, drag and drop can be used to send a folder.
      </div>

      <!-- progress bar -->
      <progress id="progressBar" value="0" max="100" style="display: none; appearance: none; width: 100%; margin-top: 5px; margin-bottom: 5px; padding-left: 5px; padding-right: 5px; height: 15px; min-height: 15px;"></progress>
    </div>
  </body>
</html>
